<html>
<head>
	<title>Chart 2D: Animation tests</title>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/tests/css/dijitTests.css";
	</style>
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
	<!--
	<script type="text/javascript" src="../../lang/functional.js"></script>
	<script type="text/javascript" src="../../lang/utils.js"></script>
	<script type="text/javascript" src="../Theme.js"></script>
	<script type="text/javascript" src="../scaler/primitive.js"></script>
	<script type="text/javascript" src="../scaler/linear.js"></script>
	<script type="text/javascript" src="../Element.js"></script>
	<script type="text/javascript" src="../axis2d/common.js"></script>
	<script type="text/javascript" src="../axis2d/Base.js"></script>
	<script type="text/javascript" src="../axis2d/Default.js"></script>
	<script type="text/javascript" src="../plot2d/common.js"></script>
	<script type="text/javascript" src="../plot2d/Base.js"></script>
	<script type="text/javascript" src="../plot2d/Default.js"></script>
	<script type="text/javascript" src="../plot2d/Lines.js"></script>
	<script type="text/javascript" src="../plot2d/Areas.js"></script>
	<script type="text/javascript" src="../plot2d/Markers.js"></script>
	<script type="text/javascript" src="../plot2d/MarkersOnly.js"></script>
	<script type="text/javascript" src="../plot2d/Scatter.js"></script>
	<script type="text/javascript" src="../plot2d/Stacked.js"></script>
	<script type="text/javascript" src="../plot2d/StackedLines.js"></script>
	<script type="text/javascript" src="../plot2d/StackedAreas.js"></script>
	<script type="text/javascript" src="../plot2d/Columns.js"></script>
	<script type="text/javascript" src="../plot2d/StackedColumns.js"></script>
	<script type="text/javascript" src="../plot2d/ClusteredColumns.js"></script>
	<script type="text/javascript" src="../plot2d/Bars.js"></script>
	<script type="text/javascript" src="../plot2d/StackedBars.js"></script>
	<script type="text/javascript" src="../plot2d/ClusteredBars.js"></script>
	<script type="text/javascript" src="../plot2d/Bubble.js"></script>
	<script type="text/javascript" src="../plot2d/Grid.js"></script>
	<script type="text/javascript" src="../plot2d/Pie.js"></script>
	<script type="text/javascript" src="../Chart2D.js"></script>
	-->
	<script type="text/javascript">

		dojo.require("dojox.charting.Chart2D");
		dojo.require("dojox.charting.themes.Shrooms");
		dojo.require("dojox.charting.themes.PlotKit.blue");
		dojo.require("dojox.charting.themes.PlotKit.cyan");
		dojo.require("dojox.charting.themes.PlotKit.green");
		dojo.require("dojox.charting.themes.Ireland");
		dojo.require("dojox.charting.themes.SageToLime");
		dojo.require("dojox.charting.themes.Minty");
		dojo.require("dojox.charting.themes.Tufte");

		dojo.require("dojox.dtl");
		dojo.require("dojox.dtl.Context");
		charts = [
			{
				description: "Clustered columns with positive and negative values, readable theme, 1-second animate-in.",
				makeChart: function(node){
					(new dojox.charting.Chart2D(node)).
						setTheme(dojox.charting.themes.Tufte).
						addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
						addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
						addPlot("default", { type: "ClusteredColumns", gap: 10, animate: { duration: 1000 } }).
						addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
						addSeries("Series B", [ -2, -1, -0.5, 1, 2 ] ).
						addSeries("Series C", [ 1, 0.5, -1, -2, -3 ] ).
						addSeries("Series D", [ 0.7, 1.5, -1.2, -1.25, 3 ] ).
						render();
				}
			}
		];
		var now = function(){
			return (new Date()).getTime();
		};


		dojo.addOnLoad(function(){
			var defaultStyle = { width: "400px", height: "200px" };
			var tmpl = new dojox.dtl.Template(dojo.byId("template").value);
			var context = new dojox.dtl.Context({ charts: charts });
			dojo.byId("charts").innerHTML = tmpl.render(context);

			dojo.forEach(charts, function(item, idx){
				var start = now();
				var n = dojo.byId("chart_"+idx);
				dojo.style(n, item.style||defaultStyle);
				item.makeChart(n);
				console.debug((now()-start), "ms to create:", (idx+1)+":", item.description);
			});
		});

	</script>
</head>
<body>
	<textarea id="template" style="display: none;">
		{% for item in charts %}
			<p>{{ forloop.counter }}: {{ item.description }}</p>
			<div id="chart_{{ forloop.counter0 }}"></div>
		{% endfor %}
	</textarea>

	<h1>Chart 2D: Animation tests</h1>

	<div id="charts"></div>
</body>
</html>
